<template>
    <div class="box">
        <div class="top">
            <div v-for="(item) in   TopList  " :key="item.id" :class="item.id === active ? 'menu active' : 'menu'"
                @click="click(item.id)">
                <IconFont :type="item.icon.name" class="icon" />
                <div>{{ item.title }}</div>
            </div>
        </div>
        <h5>创意设计</h5>
        <div class="content">
            <div v-for="(  item  ) in   ContentList  " :key="item.id" :class="item.id === active ? 'menu active' : 'menu'"
                @click="click(item.id)">
                <IconFont :type="item.icon.name" class="icon" />
                <div>{{ item.title }}</div>
            </div>
        </div>
        <h5>其他</h5>
        <div class="footer">
            <div v-for="(  item  ) in   FooterList  " :key="item.id" :class="item.id === active ? 'menu active' : 'menu'"
                @click="click(item.id)">
                <IconFont :type="item.icon.name" class="icon" />
                <div>{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const TopList = ref([
    {
        id: 1,
        title: '精品推荐',
        icon: {
            name: 'icon-shouyetianchong',
        }
    },
    {
        id: 2,
        title: '工作台',
        icon: {
            name: 'icon-a-gongzuotai0',
        }

    },
    {
        id: 3,
        title: '创建设计',
        icon: {
            name: 'icon-kongzhonghuayuan',
        }
    },
    {
        id: 4,
        title: '偏好设置',
        icon: {
            name: 'icon-yingyinqu',
        }
    },
    {
        id: 5,
        title: '我的收藏',
        icon: {
            name: 'icon-zhuoqiuqu',
        }
    }
]);
const ContentList = ref([
    {
        id: 6,
        title: 'H5',
        icon: {
            name: 'icon-jianshenfang',
        }
    },
    {
        id: 7,
        title: '海报',
        icon: {
            name: 'icon-nuanqi',
        }
    },
    {
        id: 8,
        title: '长页',
        icon: {
            name: 'icon-kuandai',
        }
    },
    {
        id: 9,
        title: '表单',
        icon: {
            name: 'icon-diancilu',
        }
    },
    {
        id: 10,
        title: '互动',
        icon: {
            name: 'icon-ditie',
        }
    },
    {
        id: 11,
        title: '电子画册',
        icon: {
            name: 'icon-xiuxianqu',
        }
    },
    {
        id: 12,
        title: '视频',
        icon: {
            name: 'icon-dianshiji',
        }
    },
    {
        id: 13,
        title: '数字人',
        icon: {
            name: 'icon-gerenzhongxin-zhihui',
        }
    },
    {
        id: 14,
        title: 'AI创作',
        icon: {
            name: 'icon-weibolu',
        }
    },
    {
        id: 15,
        title: '营销工具',
        icon: {
            name: 'icon-anquanjiankong',
        }
    },
    {
        id: 16,
        title: '作图工具',
        icon: {
            name: 'icon-dianti',
        }
    }
]);
const FooterList = ref([
    {
        id: 17,
        title: '案例中心',
        icon: {
            name: 'icon-kandian-zhihui',
        }
    },
    {
        id: 18,
        title: '正版素材',
        icon: {
            name: 'icon-kaitongfuwu',
        }
    },
    {
        id: 19,
        title: '成为设计师',
        icon: {
            name: 'icon-kuaijiezhifu',
        }
    }
]);

const active = ref(1);

const click = (id: number) => {
    const item = TopList.value.find((t: any) => t.id == id);
    if (item?.title == '工作台') {
        // active.value = id;
        // router.push({ path: '/goods' });
        window.open('/goods', '_blank');
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    padding: 5px 0 0 10px;
    box-sizing: border-box;

}

h5 {
    padding: 0 0 0 10px;
    box-sizing: border-box;
    font-weight: normal;
    margin: 10px 0;
    color: #a7a7a7;
}

.active {
    font-weight: bold;
    color: #1261ff;
    background: #eef4ff;
}

.menu {
    cursor: pointer;
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 0 0 0 10px;
    height: 40px;
    align-items: center;
    font-size: 14px;
    margin: 5px 0;
    border-radius: 5px;
    box-sizing: border-box;

    .icon {
        font-size: 20px;
        margin-right: 20px;
    }
}

.menu:hover {
    background: #eef4ff;
    font-weight: bold;
}
</style>